@charset "utf-8";
@import 'common';
@import 'layafamily';
@import 'layagame';


.web{
	.engine_box{
		background-color: #fbfaf7;
		border-bottom: 1px solid #eaeaee;
		padding-top: 106px;
		padding-bottom: 42px;
		h2{
			color: #0078d7;
			font-size: 48px;
			font-weight: bold;
		}
		h3{
			color: #666666;
			font-size: 30px;
			line-height: 1.5em;
		}
		.bottom_box{
			padding: 60px 5px 80px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.box{
				flex-basis: 48%;
				display: flex;
				align-items: flex-start;
				margin-bottom: 30px;
				.img_box{
					flex-basis: 30%;
					padding-top: 30%;
					position: relative;
					background-color: #0078d7;
					border-radius: 4px;
					flex-shrink: 0;
					img{
						position: absolute;
						height: 90%;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
					}
				}
				.text_box{
					padding-left: 5px;
					p{
						color: #333;
						font-size: 15px;
						font-weight: bold;
						margin-bottom: 2px;
					}
					span{
						color: #666666;
						font-size: 12px;
						text-align: justify;
						display: block;
					}
				}
			}
		}
		>div{
			background:url(../img/引擎背景_05.png) no-repeat right bottom;
		}
	}

	.advantage_box{
		>div{background:url(../img/优势背景图.jpg) no-repeat left bottom;
			}
		padding-top: 110px;
		padding-bottom: 100px;
		h2{ line-height: 2em;
			color: #a9cc28;
			font-weight: bold;
			font-size: 48px;
		}
		.ul_bigbox{
			flex-basis: 30%;
			display: flex;
			align-items: center;
			padding:15px 10px;
			.ul_imgbox{
				display: flex;
				flex-basis:12% ;
				padding-top:12%;
				background-color: #a9cc28;
				position: relative;
				border-radius: 50%;
				flex-shrink: 0;
				img{
					height: 60%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
				}
			}
			.ul_wordbox{
				padding-left:5px;
				p{  margin-bottom: 0;
					font-size: 14px;
					color: #666666;
				}
			}
		}	
	}
	.div_word{
		display: flex;
		justify-content: center;
	}
	.family_box{
		background-color: $color;
		padding-top: 114px;
		padding-bottom: 127px;
		h2{
			font-size: 48px;
			color: white;
		}
		.family_bigbox{
			display: flex;
			// flex-basis: 65%;
			padding-top: 70px;
			justify-content: space-between;
			flex-wrap: wrap;
			.family_list{
				flex-basis: 44%;
				display: flex;
				align-items: center;
			.family_imgbox{
				
					img{
						
					}
				}
			.family_textbox{

				padding-left: 60px;
				h3{
					color: white;
					font-size: 33px;
				}
				p{
					color: white;
					font-size: 14px;
				}
			}	
			}
		}
	}
	.game_box{
		padding-top: 85px;
		padding-bottom: 48px;
		.game_bigbox{
			
			.game_word{
				display: flex;
				justify-content: space-between;
				.word_left{
					h3{
						font-size: 35px;
					}
				}
				.word_right{
					display: flex;
					align-self:center;
					a{
						color: #2a2a2a;
						font-size: 14px;
					}
				}
			}
			.game_photo{
				padding-top: 45px;
				display: flex;
				.photo_left{
					
				}
				.photo_right{
					// flex-basis: 70%;
					padding-left: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					.small_box{
						line-height: 45px;
						
						padding-left: 15px;
						
						.photo_small{
							width: 64px;
							height: 64px;
							
							img{
								width: 100%;
							}
						}
						.text_small{
							display: flex;
							flex-wrap: wrap;
							justify-content: center;
							
							p{
								font-size: 14px;
								color: #2a2a2a;
							}
						}
					}
				}
			}
		}
	}
	.partner_box{
		background-color: #f4f4f4;
		padding-top: 40px;
		padding-bottom: 60px;
		.partner_big{
			.partner_word{

				h3{
					font-size: 30px;
					display: inline;
				}
				p{
					display: inline;
					margin-bottom: 0;
					font-size: 12px;
					color: #777777;
				}
			}
			.partner_bigphoto{
				display: flex;
				justify-content: space-between;
				flex-basis: 68%;
				flex-wrap: wrap;
				padding-top: 35px;
				
				.partner_photo{
					margin-bottom: 20px;
					border: 1px #dddddd solid;
					width: 148px;
					height: 64px;
					background-color: white;
					position: relative;
					border-radius: 8px;
					img{
						width: 95%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%)
					}
				}
			}
		}
	}

// web END
}


@media screen and (min-width:992px) and (max-width:1199px) {
	.web{
		.engine_box{
			>div{
				background:url(../img/引擎背景_05.png) no-repeat right bottom/80%;
			}
		}
		.advantage_box{
			>div{background:url(../img/优势背景图.jpg) no-repeat left bottom /90%;
			}
		
			.ul_bigbox{
				.ul_imgbox{
					flex-basis: 23%;
					padding-top: 23%;
					}
				.ul_wordbox{
					p{
						font-size: 16px;
						
					}
					
				}
			}
		}
		.family_box{
			.family_bigbox{
				.family_list{
					.family_textbox{
						h3{
							font-size: 28px;
						}
					}
				}
			}
		}
		.game_box{
			.game_bigbox{
				.game_word{
					.word_left{
							h3{
								font-size: 45px;
							}
						}
					.word_right{
							a{
								font-size: 20px;
							}
						}
					}
				.game_photo{
					display: flex;
					flex-wrap: wrap;
					.photo_left{
						width: 100%;
						img{
							width: 100%;
						}
					}
					.photo_right{
						padding-top: 20px;
						padding-left: 0;
						display: flex;
						justify-content: flex-start;
						.small_box{
							padding-left: 30px;
							line-height: 90px;
							.photo_small{
								width: 90px;
								
							}
							.text_small{
								display: flex;
								justify-content: center;
								p{
									font-size: 20px;
									}	
								}
							}
						}
					}
				}
			}
		
		.partner_box{
			.partner_big{
				.partner_word{
					h3{
						font-size: 48px;
					}
					p{
						font-size: 20px;
					}
				}
				.partner_bigphoto{
					display: flex;
					justify-content: center;
					.partner_photo{
						margin: 10px;
						width: 180px;
						height: 60px;
						img{
							width: 95%;
						}
					}
				}
			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:991px) {
	.web{
		.engine_box{
			>div{
				background:none;
			}
			.bottom_box{
				.box{
					.img_box{
						flex-basis: 20%;
						padding-top: 20%;
					}
					.text_box{
						p{
							font-size: 25px;
						}
						span{
							font-size: 20px;
						}
					}	
				}
			}
		}
		.advantage_box{
			>div{
				background:none;
			}
			h2{
				font-size: 65px;
			}
		.ul_bigbox{
			.ul_imgbox{
				flex-basis: 10%;
				padding-top: 10%;
				}
			.ul_wordbox{
				p{
					font-size: 22px;
					}
				
				}
			}
		}
	.game_box{
		.game_bigbox{
			.game_photo{
				display: flex;
				flex-wrap: wrap;
				.photo_left{
					width: 100%;
					img{
						width: 100%;
				}
			}
			.photo_right{
				padding: 20px 10px 0;
				padding-left: 0;
				
				.small_box{
					padding: 0 15px;
					line-height: 60px;
					.photo_small{
						width: 80px;
						img{
							width: 100%;
						}
					}
					.text_small{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						p{
							font-size: 20px;
							}	
						}
					}
				}
		}
	}
}
		.partner_box{
			.partner_big{
				.partner_word{
					h3{
						font-size: 36px;
					}
					p{
						font-size: 16px;
					}
				}
				.partner_bigphoto{
					.partner_photo{
						width: 170px;
						height: 80px;
						img{
							width: 95%;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width:767px) {
	.web{
		.engine_box{
			padding-top: 8px;
			padding-bottom: 8px;
			>div{
				background:none;
			}
			h3{
				font-size: 24px;
			}
			.bottom_box{
				padding: 10px 5px;
				.box{
					flex-basis: 94%;
					.img_box{
						flex-basis: 24%;
						padding-top: 24%;
					}
					.text_box{
						padding-left: 10px;
						p{
							font-size: 26px;
						}
						span{
							font-size: 18px;
						}
					}
				}
			}
		}
		.advantage_box{
			>div{
				background:none;
			}
			h2{
				font-size: 55px;
			}
		.ul_bigbox{
			.ul_imgbox{
				flex-basis: 20%;
				padding-top: 20%;
				}
			.ul_wordbox{
				p{
					font-size: 25px;
					}
				
				}
			}
		}
		.game_box{
			.game_bigbox{
				.game_word{
					h3{
						font-size: 45px;
					}
					span{
						font-size: 16px;
					}
				}
				.game_photo{
							display: flex;
							flex-wrap: wrap;
							.photo_left{
								width: 100%;
								img{
									width: 100%;
							}
						}
					.photo_right{
						padding-top: 20px;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.small_box{
							
							.photo_small{
								width: 90px;
								height: 90px;
							}
							.text_small{
								p{
									font-size: 20px;
								}
							}
						}
					}
				}
	}
}
		.partner_box{
			.partner_big{
				.partner_word{
					h3{
						font-size: 36px;
					}
					p{
						font-size: 16px;
					}
				}
				.partner_bigphoto{
					.partner_photo{
						width: 170px;
						height: 80px;
						img{
							width: 95%;
						}
					}
				}
			}
		}
	}
}



